<!-- 科室管理页面 -->

<div class="container" :important="orgOffice">

    <div class="row handler">

        <span><i style="font-size: 15px" class="iconfont">&#xe601;</i>功能模块</span>
        <hr>

        <div class="btnBlock" type="f">
            <div>
                <i class="iconfont">&#xe6e4;</i>
                <span style="vertical-align: super;">查询科室</span>
            </div>
            <div class="triangle" type="display"></div>
        </div>

        <div class="btnBlock" type="s" id="addOfficeBtn" data-toggle="modal" data-target="#addOfficeModal">
            <div>
                <i class="iconfont">&#xe617;</i>
                <span style="vertical-align: super;">新增科室</span>
            </div>
        </div>

        <div class="btnBlock" type="t" id="delOfficeBtn" :click="@delOfficeModal">
            <div>
                <i class="iconfont">&#xe606;</i>
                <span style="vertical-align: super;">删除科室</span>
            </div>
        </div>

        <!-- 查询操作 -->
        <div class="btnarea">
        <form role="form" class="form-horizontal" data-parsley-validate="" novalidate="">

            <div class="form-group">
                <!--科室名称-->
                <label for="officeName" class="col-sm-1 control-label">科室名称</label>
                <div class="col-sm-2">
                    <input type="text" :duplex="@office.name" class="form-control" id="officeName" :duplex="@office.name">
                </div>

                <!--科室类型-->
                <label for="officeType" class="col-sm-1 control-label">科室类型</label>
                <div class="col-sm-2">
                    <select id="officeTypeId" class="form-control" :duplex="@office.depTypeId">
                        <option disabled selected value="">--请选择--</option>
                        <option value="">所有类型</option>
                        <option :for="el in @office.type" :attr="{value : el.depTypeId}">{{el.depTypeName}}</option>
                    </select>
                </div>

                <button type="button" class="btn btn-sm btn-primary btn-right" id="query" :click="@queryOffice">查询</button>
            </div>
        </form>
        </div>

        <span><i style="font-size: 15px" class="iconfont">&#xe6d6;</i>列表展示</span>
        <hr>

    </div>


    <div class="row data">
        <div>
            <table id="officeInfo"
                   data-show-export="true"
                   data-detail-formatter="detailFormatter"
                   data-minimum-count-columns="2"
                   data-pagination="true"
                   data-id-field="id"
                   data-page-list="[10, 25, 50, 100, ALL]"
                   data-show-footer="false"
                   data-side-pagination="client"
                   data-click-to-select="true" data-page-number="1" data-page-size="5" data-cache="false">
                <thead>
                <tr>
                    <th data-field="state" data-radio="true"></th>
                    <th data-field="depName" data-sortable="true">科室名称</th>
                    <th data-field="depTypeName" data-sortable="true">科室类型</th>
                    <th data-field="groupName" data-sortable="true">所属队伍</th>
                    <th data-field="createTime" data-sortable="true">创建时间</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- 新增科室 -->
    <div class="modal fade" id="addOfficeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title" id="exampleModalLabel"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>新增科室</h5>
                </div>

                <div class="modal-body">
                    <div>

                        <div class="row form-group">
                            <label for="officeType" class="col-sm-2 col-sm-offset-1">科室类型:</label>
                            <select style="padding: 5px;" id="officeType" class="col-sm-8" :duplex="@newType">
                                <option disabled selected value="">--请选择--</option>
                                <option :for="el in @office.type" :attr="{value : el.depTypeId}">{{el.depTypeName}}</option>
                            </select>
                            <span class="col-sm-1 tip">*</span>
                        </div>

                        <div class="row form-group">
                            <label class="col-sm-2 col-sm-offset-1">科室描述:</label>
                            <textarea style="resize: none;height: 100px;min-height: 100px" type="text" class="col-sm-8" :duplex="@newDes"></textarea>
                            <span class="col-sm-1 tip">*</span>
                        </div>



                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" :click="@addOffice">提交</button>
                </div>

            </div>
        </div>
    </div>


    <!-- 删除科室confirm -->
    <div class="modal fade" id="delOfficeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>确定删除科室？</h5>
                </div>
                <div class="modal-body">
                    <p>注意：</p>
                    <p style="color: red">该操作会同时删除当前科室作为组织机构的账号，当前科室下发的任务，当前科室信息</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary" :click="@delOffice">确定删除</button>
                </div>
            </div>
        </div>
    </div>

</div>



